﻿
@{
    ViewBag.Title = "预定房间";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

@section head{

    <link rel="stylesheet" type="text/css" href="~/Content/WxPage.css?d=@DateTime.Now" />
    <link rel="stylesheet" type="text/css" href="~/Scripts/DateJS/date/css/index.css?d=@DateTime.Now" />
    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/DateJS/date/js/date.js"></script>
    <script src="~/Scripts/jquery.pin.js"></script>
    <link rel="stylesheet" href="~/Content/owl-carousel/owl.carousel.css" />
    <link rel="stylesheet" href="~/Content/owl-carousel/owl.theme.css" />
    <script src="~/Content/owl-carousel/owl.carousel.js"></script>

}
<div style="height:136px;width:100%;position:relative;">
    @if (ViewBag.HotelId == "210883")
    {
        <div style="position:absolute;top:5px;left:5px;height:20px;" onclick="window.location.href='/WxPage/RoomList?hotelid=210883'">
            <img src="~/Content/IMG/ToRight.png" style="transform:scaleX(-1);height:20px;margin-top:-6px;" /><span style="line-height:20px;vertical-align:central;font-size:18px;color:white;">返回</span>
        </div>
    }
    else if (ViewBag.HotelId == "209412")
    {
        <div style="position:absolute;top:5px;left:5px;height:20px;" onclick="window.location.href='/WxPage/RoomList?hotelid=209412'">
            <img src="~/Content/IMG/ToRight.png" style="transform:scaleX(-1);height:20px;margin-top:-6px;" /><span style="line-height:20px;vertical-align:central;font-size:18px;">返回</span>
        </div>
    }
    else if (ViewBag.HotelId == "210901")
    {
        <div style="position:absolute;top:5px;left:5px;height:20px;" onclick="window.location.href='/WxPage/RoomList?hotelid=210901'">
            <img src="~/Content/IMG/ToRight.png" style="transform:scaleX(-1);height:20px;margin-top:-6px;" /><span style="line-height:20px;vertical-align:central;font-size:18px;">返回</span>
        </div>
    }
    else
    {
        <div style="position:absolute;top:5px;left:5px;height:20px;background-color:rgba(128, 128, 128,0.5)" onclick="window.location.href='/WxPage/RoomList?hotelid=210888'">
            <img src="~/Content/IMG/ToRight.png" style="transform:scaleX(-1);height:20px;margin-top:-6px;" /><span style="line-height:20px;vertical-align:central;font-size:18px;color:white;">返回</span>
        </div>
    }
    <img src="~/Content/IMG/YGC/03.logo.png" style="width:100%;height:100%;" />
</div>
<div class="ROTitle" style="margin-top:0px;">
    <div style="width:90%;margin-left:5%;border:0;border-style:dotted;border-bottom-width:1px;border-top-width:1px;border-top-color:rgba(0,0,0,0.1);height:30px;">
        <p style="font-size:15px;line-height:30px;font-family:'Microsoft YaHei','微软雅黑';letter-spacing:3px;"><span>无隅·@ViewBag.HotelName</span></p>
    </div>
    <div style="width:90%;margin-left:5%;border:0;height:30px;">
        <p style="font-size:15px;line-height:30px;font-family:'Microsoft YaHei','微软雅黑';letter-spacing:3px;"><span>房型：@ViewBag.RoomName</span></p>
    </div>
    <!-- 入住时间选择 -->
    <div class="row select-time" style="background-color:rgb(231,225,205);width:90%;border-radius:25px;margin:0 auto;">
        <div style="padding-left:10%;width:70%; float:left;height:50px;">
            <p style="margin-bottom:0px;line-height:25px;"><span class="time entertime"></span><span>&nbsp;&nbsp;入住</span></p>
            <p style="margin-bottom:0px;line-height:25px;"><span class="time leavetime"></span><span>&nbsp;&nbsp;离店</span></p>
        </div>
        <div style="width:30%;float:left;height:50px;">
            <span class="time night" style="line-height:50px;">共1晚</span>
        </div>
        @*<input type="text" class="input-enter none">*@

        @*<span class="c-back">一</span>*@
        @*<span class="time leavetime"></span>*@
        @*<input type="text" class="input-leave none">*@


    </div>

</div>
<script type="text/javascript">

    var hotelId=@ViewBag.HotelId.ToString();
    var roomTypeId =@ViewBag.RoomTypeId.ToString();
    var roomMoney = 0;
    var roomNum = 0;

    $('.select-time').hotelDate("OrderRoom");

    $(".entertime").text("@ViewBag.EnterTime.ToString()" + " (星期" + "日一二三四五六".charAt(new Date("@ViewBag.EnterTime.ToString()").getDay()) + ")");
    $(".leavetime").text("@ViewBag.LeaveTime.ToString()" + " (星期" + "日一二三四五六".charAt(new Date("@ViewBag.EnterTime.ToString()").getDay()) + ")");
    $(".night").text("共"+@ViewBag.NightNum.ToString()+"晚");
</script>

<script type="text/javascript">

    //选择具体房型预定调用该函数，使用的是时间控件传送"OrderRoom"
    function OrderRoom(enterTime, leaveTime) {
        //var ETime = $(".entertime").text();
        //var LTime = $(".leavetime").text();

        var result = $("#scriptFormOrderRoom").html();
        $(result).appendTo("body");
        $("#formETime").val(enterTime);
        $("#formLTime").val(leaveTime);
        $("#roomTypeId").val(roomTypeId);
        $("#formHotelId").val(hotelId);
        $("#FormOrderRoom").submit().remove();
    }
</script>
<script type="text/template" id="scriptFormOrderRoom">
    <form action="/WxPage/OrderRoom" method="post" id="FormOrderRoom">
        <input type="hidden" name="formETime" value="" id="formETime" />
        <input type="hidden" name="formLTime" value="" id="formLTime" />
        <input type="hidden" name="roomTypeId" value="" id="roomTypeId" />
        <input type="hidden" name="HotelId" value="" id="formHotelId" />
    </form>
</script>



<div class="RORoomNum" style="border-style:solid;border-width:1px;border-bottom-width:1px;border-color:gainsboro;">
    <div style="width:100px;height:34px;background-color:white;">
        <p style="line-height:34px;font-size:15px;margin:0;text-align:right;">房间数量：</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:34px;">
        <select name="RoomNum" id="RoomNum">
            @for (int i = 0; i < ViewBag.RoomNum; i++)
            {
                <option value="@((i + 1).ToString())" > @((i + 1).ToString()) 间房</option>
            }
        </select>
    </div>
</div>
@*<div style="height:20px;background-color:transparent;width:100%;"></div>*@
<div class="RORoomNum" style="border-style:solid;border-width:1px;border-color:gainsboro;" >
    <div style="width:100px;height:35px;background-color:white;">
        <p style="line-height:35px;font-size:15px;margin:0;text-align:right;">入住姓名：</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:35px;">
        @*<input type="text" placeholder="入住者姓名（必填）" readonly name="CheckInName" value="@ViewBag.UserName" style="font-size:15px;line-height:35px;width:100%;border:0;"/>*@
        <input type="text" placeholder="默认为注册时姓名（选填）"  name="CheckInName" value="" style="font-size:15px;line-height:35px;width:100%;border:0;" />
    </div>
</div>
<div class="RORoomNum" style="border-style:solid;border-width:1px;border-color:gainsboro;">
    <div style="width:100px;height:35px;background-color:white;">
        <p style="line-height:35px;font-size:15px;margin:0;text-align:right;">联系手机：</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:35px;">
        @*<input type="number" placeholder="登记的手机号码（必填）" name="CheckInTel" readonly value="@ViewBag.TelNum" style="font-size:15px;line-height:35px;width:100%;border:0;" />*@
        <input type="number" placeholder="(默认为注册手机号)" name="CheckInTel"  value="@ViewBag.TelNum" style="font-size:15px;line-height:35px;width:100%;border:0;" />
    </div>
</div>
<div class="RORoomNum" style="border-style:solid;border-width:1px;border-color:gainsboro;">
    <div style="width:100px;height:35px;background-color:white;">
        <p style="line-height:35px;font-size:15px;margin:0;text-align:right;">留言备注：</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:35px;">
        <input type="text" placeholder="备注信息（可选）" name="CheckInMemo" style="font-size:15px;line-height:35px;width:100%;border:0;" />
    </div>
</div>
<div style="height:20px;background-color:transparent;width:100%;"></div>
<div class="RORoomNum" style="height:22px;background-color:white;border-style:solid;border-width:1px;border-color:gainsboro;">
    <div style="width:100px;height:18px; background-color:white;">
        <p style="line-height:20px;font-size:15px;margin:0;padding-left:5px;">支付方式</p>
    </div>
</div>
<div class="RORoomNum" style="height:50px;background-color:white;border-style:solid;border-width:1px;border-color:gainsboro;" >
    <div style="float:left;width:50px;margin-left:5px;margin-top:5px;">
        <img src="~/Content/IMG/WxPay.png" style="width:auto;height:38px;" />
    </div>
    <div style="height:30px;background:transparent;width:230px;margin-top:2px;margin-bottom:5px;">
        <p style="margin:0;">微信支付</p>
        <p style="margin:0;font-size:10px">推荐使用，支付后为你保留房间</p>
    </div>
    <div style="position:absolute;right:10px;">
        <input type="radio" name="PaySelect" id="checkbox_a1" class="chk_1" value="WeChat" checked /><label for="checkbox_a1"></label>
    </div>
</div>
<div class="RORoomNum" style="height:50px;background-color:white;border-style:solid;border-width:1px;border-color:gainsboro;">
    <div style="float:left;height:30px;background:transparent;width:230px;margin-left:5px;margin-top:2px;margin-bottom:5px;">
        <p style="margin:0;">暂不支付</p>
        <p style="margin:0;font-size:10px">订单保留到18:00，超时将被自动取消</p>
    </div>
    <div style="position:absolute;right:10px;">
        <input type="radio" name="PaySelect" id="checkbox_a2" class="chk_1" value="PayLater"  /><label for="checkbox_a2"></label>
    </div>
</div>
<div style="height:100px;background-color:transparent;width:90%;margin:10px auto;">
    <p style="font-size:16px;">预定须知:</p>
    <p style="margin-bottom:5px;">在线支付：提交订单后支付房费，酒店第一时间接单</p>
    <p style="margin-bottom:5px;">免费取消：订单提交后可随时变更或免费取消</p>
    <p style="margin-bottom:5px;">加床：不加床</p>
</div>
<div style="clear:both;height:50px;background-color:transparent;"></div>
<div style="position:fixed;bottom:0;width:100%;height:50px;background-color:white;">
    <div style="float:right;margin-top:7px;margin-right:20px;">
        <div style="background-color:rgb(235,136,120);height:35px;width:auto;padding-left:5px;padding-right:5px;border-radius:20px;" onclick="PriceDetail()">
            <p style="margin:0;line-height:35px;font-size:18px;color:white;text-align:center;">立即预定</p>
        </div>
    </div>

    <p style="float:right;display:block;margin-right:20px;line-height:50px;font-size:15px;color:salmon;text-align:center;font-weight:bold;" onclick="PriceDetail()">详情</p>
    <div style="float:right;height:50px;background-color:transparent;width:30%;" onclick="PriceDetail()">
        <p class="totalPrice">￥
            <span id="TotalPrice">
                
            </span>
        </p>        
    </div>
    <div style="float:right;height:50px;">
        <p style="line-height:50px;font-size:15px">@ViewBag.NightNum.ToString()晚总价</p>
    </div>

    
</div>


<div id="PriceDetailPad" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(222, 204, 204,0.4);" onclick="DelPriceDetail()">
    <div style="overflow-scrolling:touch;overflow:auto;background-color:white;width:100%;height:50%;top:15%;width:85%;margin:0 auto;position:relative;">
        <div style="height:40px; width:100%;margin-bottom:30px;">
            <img src="~/Content/IMG/YGC/07.title.png" style="width:100%;height:100%" />
        </div>
        
        <div style="width:90%;margin:0 auto;height:auto;border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,0.2)">
            <p style="margin:0;font-size:16px;">无隅·@ViewBag.HotelName</p>
        </div>
        <div style="width:90%;margin:0 auto;margin-bottom:10px;height:auto;border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,0.2)">
            <p style="margin:0;font-size:16px;">房型：@ViewBag.RoomName</p>
        </div>
        <div style="margin:0 auto;width:90%;height:60px;">
            <p style="margin-bottom:2px;"><span id="detailInTime" style="font-family:'Microsoft YaHei','微软雅黑';font-size:18px;color:red;letter-spacing:1px;"></span><span>入住</span></p>
            <p style="margin-bottom:2px;"><span id="detaiOutTime" style="font-family:'Microsoft YaHei','微软雅黑';font-size:18px;color:red;letter-spacing:1px;"></span><span>离店</span></p>
        </div>
        <div style="width:90%;margin:0 auto;" >
            <p style="letter-spacing:3px;font-size:18px;">共 <span style="font-size:18px;color:red;">@ViewBag.NightNum.ToString()</span> 晚</p>
        </div>
        <div style="margin-top:30px;margin-left:auto;margin-right:auto;width:50%;">
            <p style="font-size:16px;">合计金额<span style="font-size:22px;margin-left:10px;color:red" id="padtotalprice">1235</span></p>
        </div>
        <div class="OPPay" style="position: absolute;width: 100%;background-color: rgb(217,111,27);height: 40px;bottom: 0;overflow:auto;" onclick="WeChatPay()">
            <p style="text-align:center;line-height:40px;font-size:20px;margin:0;">确认订单（微信支付）</p>
        </div>
    
    
    
    @*@for (int i = 0; i < ViewBag.List.Count; i++)
        {
            <p style="font-size:small;margin:5px 5px 5px 5px;">入住日期:<span style="font-size:large;color:cornflowerblue">@ViewBag.List[i]["RoomDate"].ToString()</span>&nbsp;&nbsp;&nbsp;单间价格<span style="font-size:large;color:orangered">@ViewBag.List[i]["Price"].ToString()</span></p>
        }*@                
    </div>
</div>
<script type="text/javascript">
    @{
        double money = 0;
        for (int i = 0; i < ViewBag.List.Count; i++)
        {
            money += double.Parse(ViewBag.List[i]["Price"].ToString());
        }
    }
    roomMoney =@money;

    $("#TotalPrice").text(roomMoney);
    $("#padtotalprice").text("￥" + roomMoney);
    $("#RoomNum").change(function () {
        var tempmoney = $("#RoomNum").val() * roomMoney;
        $("#TotalPrice").text(tempmoney);

        $("#padtotalprice").text("￥"+tempmoney);
        //OrderPad Display
        roomNum = $("#RoomNum").val();
        $("#OPRoomNum").text(roomNum + "");
        $("#OPTotalPrice").text(tempmoney);

    });
</script>


<script type="text/javascript">
    $("#detailInTime").text("@ViewBag.EnterTime.ToString()" + " (星期" + "日一二三四五六".charAt(new Date("@ViewBag.EnterTime.ToString()").getDay()) + ")");
    $("#detaiOutTime").text("@ViewBag.LeaveTime.ToString()" + " (星期" + "日一二三四五六".charAt(new Date("@ViewBag.LeaveTime.ToString()").getDay()) + ")");
    function PriceDetail() {
        $("#PriceDetailPad").css("display", "block");

    }
    function DelPriceDetail() {
        $("#PriceDetailPad").css("display", "none");
    }

</script>

@*<div id="OrderPad" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(222, 204, 204,0.4);" onclick="CloseOrderPad()">
    <div class="OPPad" style="verflow-scrolling: touch;overflow: auto;display: block;background-color: white;height: 60%;top: 15%;width: 85%;margin: 0 auto;position: relative;" onclick="StopBubble(event)">
        <h2 style="text-align:center;color:blue">订单详情</h2>
        <p style="font-size:15px;font-weight:bold;">店名：<span>无隅·@ViewBag.HotelName</span></p>
        <p style="font-size:15px;font-weight:bold;">房型：<span>@ViewBag.RoomName</span></p>
        <p style="font-size:20px;text-align:center;margin:0;">入住时间 @ViewBag.EnterTime.ToString() </p>
        <p style="font-size:20px;text-align:center;margin:0;">离店时间 @ViewBag.LeaveTime.ToString()</p>
        <p style="font-size:20px;text-align:center;margin:0;">一共住<span class="totalPrice">@ViewBag.NightNum.ToString()</span> 晚 所需房间数<span id="OPRoomNum" class="totalPrice"></span></p>
        <p style="font-size:20px;text-align:center;margin:0;">价格合计<span class="totalPrice">￥</span><span id="OPTotalPrice" class="totalPrice"></span></p>       
        <p style="font-size:15px;margin:0;overflow:auto">备注:<span id="OPMemo"></span> </p>
        <div style="height:40px;"></div>
        <div class="OPPay" style="position: absolute;width: 100%;background-color:  rgb(53,178,152);height: 40px;bottom: 0;overflow:auto;" onclick="WeChatPay()">
            <p style="text-align:center;line-height:40px;font-size:20px;margin:0;">确认订单（微信支付）</p>
        </div>
    </div>
</div>*@
<script type="text/javascript">
    $(document).ready(function () {

        $("body").css("background-color", "rgb(255,255,245)");
        //var owl = $("#owl-demo");
        //owl.owlCarousel({
        //    lazyLoad: true,
        //    autoPlay: 3000,
        //    navigation: false,
        //    singleItem: true,
        //    transitionStyle: "fade",
        //    paginationSpeed: 1000,
        //    slideSpeed: 800
        //});

    });


    function OpenOrderPad() {
        $("#OrderPad").css("display", "block");
        var checkInMemo = "";
        checkInMemo = $("input[name='CheckInMemo']").val();
        $("#OPMemo").text(checkInMemo);
    }
    function CloseOrderPad() {
        $("#OrderPad").css("display", "none");
    }

    function WeChatPay() {
        //alert("aaaa");


        var temp = "";
        var checkinname = "";
        checkinname = $("input[name='CheckInName']").val();
        //if (checkinname == "") {
        //    alert("请填写入住者姓名");
        //    return;
        //}
        var contactTel = "";
        contactTel = $("input[name='CheckInTel']").val();
        temp = $("input[name='PaySelect']:checked").val();
        //alert(temp);
        if (temp == "WeChat") {
            //直接付款
            var result = $("#TemplateOrder").html();
            $(result).appendTo("body");
            roomNum = $("#RoomNum").val();
            $("#formRoomNum").val(roomNum);
            var totalPrice = $("#RoomNum").val() * roomMoney;
            var checkInMemo = "";
            checkInMemo = $("input[name='CheckInMemo']").val();
            $("#formCheckInMemo").val(checkInMemo);
            $("#formTotalPrice").val(totalPrice);
            $("#formCheckInName").val(checkinname);
            $("#ContactTel").val(contactTel);
            $("#formPayImmediately").val("yes");
            $("#formOderDetail").submit().remove();  
        }
        else if (temp == "PayLater") {
            var result = $("#TemplateOrder").html();
            $(result).appendTo("body");
            roomNum = $("#RoomNum").val();
            $("#formRoomNum").val(roomNum);
            var totalPrice = $("#RoomNum").val() * roomMoney;
            var checkInMemo = "";
            checkInMemo = $("input[name='CheckInMemo']").val();
            $("#formCheckInMemo").val(checkInMemo);
            $("#formTotalPrice").val(totalPrice);
            $("#formCheckInName").val(checkinname);
            $("#ContactTel").val(contactTel);
            $("#formPayImmediately").val("no");
            $("#formOderDetail").submit().remove();
        } 
    }

    function StopBubble(evnet) {
        event.stopPropagation();        
    }
    roomNum = $("#RoomNum").val();
    $("#OPRoomNum").text(roomNum + "");
    $("#OPTotalPrice").text(roomMoney);
</script>
<script type="text/template" id="TemplateOrder">
    <form action="/WxPage/Order" method="post" id="formOderDetail">
        <input type="hidden" name="HotelId" value="@ViewBag.HotelId" />
        <input type="hidden" name="HotelName" value="@ViewBag.HotelName" />
        <input type="hidden" name="RoomName" value="@ViewBag.RoomName" />
        <input type="hidden" name="MemberNo" value="@ViewBag.ZZMemberNo" />
        <input type="hidden" name="RoomTypeId" value="@ViewBag.RoomTypeId" />        
        <input type="hidden" name="EnterTime" value="@ViewBag.EnterTime.ToString()" id="roomTypeId" />
        <input type="hidden" name="LeaveTime" value="@ViewBag.LeaveTime" />
        <input type="hidden" name="RoomNum" value="" id="formRoomNum" />
        <input type="hidden" name="TotalPrice" value="" id="formTotalPrice" />
        <input type="hidden" name="PersonName" value="@ViewBag.UserName" id="formPersonName" />
        <input type="hidden" name="CheckInName" value="" id="formCheckInName" />
        <input type="hidden" name="ContactTel" value="" id="formContactTel" />
        <input type="hidden" name="Tel" value="@ViewBag.TelNum" />
        <input type="hidden" name="Remark" value="" id="formCheckInMemo" />
        <input type="hidden" name="PayImmediately" value="no" id="formPayImmediately" />
    </form>
</script>